﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Demo2_3.aspx.cs" Inherits="TestSuiteExtNET.Demo2_3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        #pnlTableLayout .x-table-layout {
            padding : 5px;
        }
        
        #pnlTableLayout .x-table-layout td {
            font-size : 11px;
            padding   : 5px;
            vertical-align : top;
        }
    </style>

    <script type="text/javascript">
        Ext.override(Ext.chart.LegendItem, {
            createSeriesMarkers: function (config) {
                var me = this,
                    index = config.yFieldIndex,
                    series = me.series,
                    seriesType = series.type,
                    surface = me.surface,
                    z = me.zIndex;

                // Line series - display as short line with optional marker in the middle
                if (seriesType === 'line' || seriesType === 'scatter') {
                    if (seriesType === 'line') {
                        var seriesStyle = Ext.apply(series.seriesStyle, series.style);
                        me.drawLine(0.5, 0.5, 16.5, 0.5, z, seriesStyle, index);
                    };

                    if (series.showMarkers || seriesType === 'scatter') {
                        var markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
                            fill: series.getLegendColor(index)
                        });
                        me.drawMarker(8.5, 0.5, z, markerConfig);
                    }
                }
                // All other series types - display as filled box
                else {
                    me.drawFilledBox(12, 12, z, index);
                }
            },

            /**
            * @private Creates line sprite for Line series.
            */
            drawLine: function (fromX, fromY, toX, toY, z, seriesStyle, index) {
                var me = this,
                    surface = me.surface,
                    series = me.series;

                return me.add('line', surface.add({
                    type: 'path',
                    path: 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY,
                    zIndex: (z || 0) + 2,
                    "stroke-width": series.lineWidth,
                    "stroke-linejoin": "round",
                    "stroke-dasharray": series.dash,
                    stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
                    style: {
                        cursor: 'pointer'
                    }
                }));
            }

        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

            <ext:Panel
                id="pnlTableLayout"
                runat="server"
                Region="Center" 
                Title="Statistiche registrazione utenti"
                Border="false"
                BodyPadding="15"
                ClientIDMode="Static"
                AutoScroll="true"
                Layout="TableLayout">
                <LayoutConfig>
                    <ext:TableLayoutConfig Columns="2" />
                </LayoutConfig>
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>                            
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" />

                            <ext:DateField ID="dtFrom" runat="server" FieldLabel="Da:" LabelAlign="Left" LabelWidth="15" />

                            <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" />

                            <ext:DateField ID="dtTo" runat="server" FieldLabel="A:" LabelAlign="Left" LabelWidth="15" />

                            <ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" />
                            <ext:ToolbarSeparator  />
                            <ext:ToolbarSpacer ID="ToolbarSpacer5" runat="server" />

                            <ext:MultiCombo ID="mcSites" runat="server" Width="160"
                                            DisplayField = "SiteName"
                                            ValueField = "Id" 
                                            FieldLabel="Siti:" LabelAlign="Left" LabelWidth="15">
                                <Store>
                                  <ext:Store runat="server">
                                     <Model>
                                        <ext:Model runat="server">
                                           <Fields>
                                             <ext:ModelField Name="SiteName" Type="String"></ext:ModelField>
                                           </Fields>
                                        </ext:Model>
                                     </Model>
                                  </ext:Store>
                                </Store>
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" Qtip="Remove selected" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Handler="this.clearValue();" />
                                </Listeners>
                            </ext:MultiCombo>

                            <ext:ToolbarSpacer ID="ToolbarSpacer4" runat="server" />
                            <ext:ToolbarSeparator />

                            <ext:Button ID="Button1" 
                                runat="server" 
                                Text="Reload Data" 
                                Icon="ArrowRefresh" 
                                OnDirectClick="ReloadData"
                                />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="P1" runat="server" ClientIDMode="Static" Height="500" Width="350" AutoScroll="true" Title="Users Subscriptions" >
                      <Items>
                          <ext:Panel 
                            ID="gaugesPanel" 
                            runat="server" 
                            BodyPadding="5"
                            ClientIDMode="Static"
                            Layout="VBoxLayout">
                            <Defaults>
                                <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                            </Defaults>
                            <LayoutConfig>
                               <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                        </ext:Panel>
                      </Items>
                    </ext:Panel>

                    <ext:Panel 
                        ID="Panel4" 
                        runat="server" 
                        Title="Distribuzione Registrazione"
                        Width="700"
                        Height="500"
                        BodyPadding="15"
                        Layout="FitLayout">
                      <Items>
<%--                        <ext:DrawText ID="drwText" runat="server" ClientIDMode="Static"
                                        AutoSize="false"
                                        ViewBox="false"
                                        Height="350"
                                        Width="200"
                                        Padding="20"
                                        Text="Nessun Dato disponibile !" Visible="false" >
                            <TextStyle Fill="#000" FontSize="28px" FontFamily="Arial" Y="50" />
                        </ext:DrawText>--%>
                        <ext:Chart 
                            ID="Chart1" 
                            runat="server" 
                            Animate="true">
                            <Plugins>
                                <ext:VerticalMarker ID="VerticalMarker1" runat="server">
                                    <XLabelRenderer Handler="return Ext.util.Format.date(value, 'M d');" />
                                </ext:VerticalMarker>
                            </Plugins>
                            <LegendConfig Position="Bottom" />
                        </ext:Chart>
                      </Items>
                    </ext:Panel>

                    <ext:Panel 
                        ID="Panel7" 
                        runat="server" 
                        ColSpan="2"
                        Title="---- Colori ----"
                        Height="200"
                        BodyPadding="15"
                        Layout="FitLayout">
                        <Items>
                          <ext:GridPanel runat="server" ID="grdData" ClientIDMode="Static">
                            <Store>
                                <ext:Store ID="Store1" runat="server" PageSize="10">
                                    <Model>
                                    <ext:Model ID="Model1" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="CodiceColore" Type="String"></ext:ModelField>
                                            <ext:ModelField Name="Descrizione" Type="String"></ext:ModelField>
                                            <ext:ModelField Name="Note" Type="String"></ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Text="Codice Colore" DataIndex="CodiceColore" />
                                    <ext:Column ID="Column2" runat="server" Text="Descrizione" DataIndex="Descrizione" />                  
                                    <ext:Column ID="Column3" runat="server" Text="Note" DataIndex="change" Flex="1" />
                                </Columns>            
                            </ColumnModel>                             
                          </ext:GridPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>

</asp:Content>
